import { Link, Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Button } from 'antd'
import { getBillList } from '@/store/modules/billStore'
import { useDispatch } from 'react-redux'
import { useEffect, useState } from 'react'
import {
  BilibiliOutlined,
  CalculatorOutlined,
  CiCircleOutlined,
} from '@ant-design/icons'
import { Tabs } from 'antd'
import { KeepAliveOutlet } from '@/components/keepAliveOutlet'
import Board from '@/components/board'
import Detail from '@/components/detail'
import About from '@/components/about'
const tabs = [
  {
    key: '/layout/about',
    title: '月度账单',
    tabKey: 'month',
    icon: <BilibiliOutlined />,
  },
  {
    key: '/layout',
    title: '记账',
    tabKey: 'bill',
    icon: <CiCircleOutlined />,
  },
  {
    key: '/layout/detail',
    title: '年度账单',
    tabKey: 'year',
    icon: <CalculatorOutlined />,
  },
]
function Layout() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getBillList())
  }, [])

  const location = useLocation()
  console.log('location:', location.pathname)

  const navigate = useNavigate()

  const switchRoute = path => {
    navigate(path)
  }

  return (
    <div className="layout">
      <div className="nav-mask"></div>
      {/* <div className="head-nav">
        <Link to="about" style={{ marginRight: '12px' }}>
          about
        </Link>
        <Link to="">board</Link>
      </div>
      <div className="layout-content">
         /* 二级路由 
        <Outlet />
        <Button type="primary">测试</Button>
      </div> */}

      <Tabs
        defaultActiveKey={location.pathname}
        onChange={switchRoute}
        items={tabs.map((item, i) => {
          return {
            key: item.key,
            label: item.title,
            children: (
              // item.key === '/layout' ?
              <>
                <div
                  style={{ display: item.key === '/layout' ? 'block' : 'none' }}
                >
                  <Board />
                </div>

                <div
                  style={{
                    display: item.key === '/layout/about' ? 'block' : 'none',
                  }}
                >
                  <About />
                </div>
                <div
                  style={{
                    display: item.key === '/layout/detail' ? 'block' : 'none',
                  }}
                >
                  <Detail />
                </div>
              </>
            ),
            // : (
            //   <KeepAliveOutlet />
            // )
            icon: item.icon,
          }
        })}
      />
    </div>
  )
}

export default Layout
